<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    <view class="poster-scl-result-modal" :style="{'background-color': bgColor}" @click="closeHandle">
      <!-- <image :show-menu-by-longpress='true' class="img" :src="img" mode="widthFix"></image> -->
      <image :show-menu-by-longpress='true' class="img" :src="img" mode="widthFix"></image>
      
      <template v-if="useDiv" >
        <!-- class="use-div-config" -->
        
        <view v-if="hasModalMask" :style="[modalBottomMask]">
          
        </view>
        
        <image :style="[modalCloseBtnsty]" :src="modalCloseBtnImg"></image>
        
        
        <view class="use-div-config-tip" :style="[tipSty]">
          <text>长按保存</text>
          <image class="icon" :src="staticImgs.dowonloadIcon" mode=""></image>
        </view>
      </template>
      <view class="fixed-tip-wrapper" v-else-if="showBtn" :class="{'fixed-tip-wrapper-2':isFullType2}">
        
        <template> <!-- 长按保存提示 -->
          <view class="fixed-qyn-zrb-tip-save" v-if="type == 'qingyunian-zrb'">
            <text>长按保存</text>
            <image class="icon" :src="staticImgs.dowonloadIcon" mode=""></image>
          </view>
          
          
          <view class="tip-wrapper-x06" v-else-if="fullType == 'x06'">
            <text>长按保存图片</text>
            <image class="icon" :src="staticImgs.dowonloadIcon" mode=""></image>
          </view>
          
          <view class="tip-wrapper" :class="{'tip-wrapper-end': isTipWrapperEnd}" v-else-if="type!=3">
            <text>长按保存</text>
            <image class="icon" :src="staticImgs.dowonloadIcon" mode=""></image>
          </view>
        </template>
        
        <template><!-- 关闭查看详细结果提示 -->
          <view v-if="fullType == 'x06'" class="btn-wrapper-x06">
            <image class="img" :src="staticImgs.btnImgx06" mode=""></image>
          </view>
          <view class="btn-wrapper" v-else>
            <image v-if="closeBtnImg" :style="{width:cBtnWidth,height:cBtnHeight}" :src="closeBtnImg" mode=""></image>
            <image v-else-if="isFullType2" class="btn-img" style="width: 322rpx; height: 140rpx;" :src="staticImgs.tipSaveBtnImg2" mode=""></image>
            <image v-else class="btn-img" :src="staticImgs.tipSaveBtnImg" mode=""></image>
          </view>
        </template>
        
      </view>
    </view>
    
    <u-popup :show="showPopup" mode="center"  @close="closeHandle1" bgColor="transparent">
      <!-- <view style="background-color: red; width: 400rpx;height: 400rpx;"> -->
        <view class="main-modal" :style="{backgroundImage:'url('+staticImgs.bg+')'}">
          <!-- 您可以在下方选择【测评结果】，
          长按下载图片，并可分享到朋友圈。
          朋友圈收集20个赞，截图发送至chn_HR_ASC_c&b@bd.com，前20位的同事，可获得【星巴克单杯券1张】 -->
        </view>
        <view class="close-btn" @click="closeHandle1">
          <image class="img" :src="staticImgs.closeBtnImg" mode=""></image>
        </view>
      <!-- </view> -->
    </u-popup>
    
  </u-popup>
</template>

<script>
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      img:{
        type:String,
        default:''
      },
      bgColor:{
        type:String,
        default:'#000'
      },
      fullType:{
        type:String,
        default:''
      },
      closeBtnImg:{
        type:String,
        default:''
      },
      cBtnWidth:{
        type:String,
        default:''
      },
      cBtnHeight:{
        type:String,
        default:''
      },
      type:{
        type:[Number,String],
        default:0
      },
      showBtn:{
        type:Boolean,
        default:true
      },
      config:{
        type:Object,
        default:()=>{}
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          dowonloadIcon: this.imgBaseURL + '/scl/result/download-icon.png',
          tipSaveBtnImg2: this.imgBaseURL + '/scl/result/X02/tip-save-btn.png',
          tipSaveBtnImg: this.imgBaseURL + '/scl/result/tip-save-btn.png',
          bg:this.imgBaseURL + '/scl/result/fanhuaMBTI/BD/modal-img-v2.png',
          closeBtnImg:this.imgBaseURL + '/scl/result/fanhuaMBTI/BD/close.png',
          btnImgx06:this.imgBaseURL + '/scl/result/X06/tip-save-btn.png',
        },
        showPopup:false,
        modalCloseBtnImg:'',
        modalCloseBtnsty:{},
        tipSty:{},
        modalBottomMask:{},
        useDiv:false,
        hasModalMask:false,
      }
    },
    computed:{
      isFullType2(){
        return this.fullType == 'x02' || this.fullType == 'x04'
      },
      isTipWrapperEnd(){
        return this.type === 'qingyunian'
      }
    },
    watch:{
      visible:{
        handler(val){
          this.show = val
          if(val){
            setTimeout(()=>{
              if(this.type === 3){
                this.showPopup = true
              }
            },300)
          }
        },
        immediate:true
      },
      config(val){
        if(val.modalCloseBtnImg){
          this.modalCloseBtnImg = val.modalCloseBtnImg
          this.modalCloseBtnsty = val.modalCloseBtnsty 
          this.tipSty = val.tipSty 
          this.useDiv = val.useDiv//true
          if(val.hasOwnProperty('modalBottomMask')){
            this.hasModalMask = true
            this.modalBottomMask = val.modalBottomMask
          }
        }
      }
    },
    methods:{
      closeHandle1(){
        if(this.showBtn){
          this.showPopup = false
        }
      },
      closeHandle(){
        if(this.showBtn){
          this.show = false
          this.$emit('close')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .main-modal{
    width: 542rpx;
    height: 642rpx;
    padding: 44rpx;
    padding-top: 162rpx;
    box-sizing: border-box;
    
    
    background-repeat: no-repeat;
    background-size: 100%;
    
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 29rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    text-align: justify;
    font-style: normal;
    
    .img{
      width: 100%;
      height: 100%;
    }
  }
  
  .close-btn{
    margin: auto;

    margin-top: 64rpx;
    width: 70rpx;
    height: 70rpx;
    
    .img{
      width: 100%;
      height: 100%;
    }
  }
  
  .poster-scl-result-modal{
    overflow: scroll;

    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    .img{
      width: 100vw;
    }
    
    .fixed-qyn-zrb-tip-save{
      position: fixed;
      bottom: calc(8vh + constant(safe-area-inset-bottom) - 64rpx);
      bottom: calc(8vh + env(safe-area-inset-bottom) - 64rpx);
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      box-sizing: border-box;
      width: 100vw;
      // padding-left: 64rpx;
      font-size: 29rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      
      .icon{
        width: 32rpx;
        height: 32rpx;
      }
    }
    
    .tip-wrapper-x06{
      position: fixed;
      bottom: calc(32rpx + constant(safe-area-inset-bottom));
      bottom: calc(32rpx + env(safe-area-inset-bottom));
      display: flex;
      // flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      
      text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 29rpx;
        color: #FFFFFF;
        line-height: 41rpx;
        text-align: justify;
        font-style: normal;
      }
      .icon{
        width: 32rpx;
        height: 32rpx;
      }
    }
    
    .btn-wrapper-x06{
      position: fixed;
      bottom: calc(94rpx + constant(safe-area-inset-bottom));
      bottom: calc(94rpx + env(safe-area-inset-bottom));
      // left: 50%;
      // trasform: translateX(-50%);
      width: 360rpx;
      height: 70rpx;
      
      .img{
        width: 100%;
        height: 100%;
      }
    }
    
    .fixed-tip-wrapper{
      position: fixed;
      bottom: calc(8vh + constant(safe-area-inset-bottom));
      bottom: calc(8vh + env(safe-area-inset-bottom));
          display: flex;
          justify-content: center;
          width: 100%;
      
      .tip-wrapper{
        position: fixed;

    
        box-sizing: border-box;
        width: 100vw;
        padding-left: 64rpx;
        font-size: 29rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        
        .icon{
          width: 32rpx;
          height: 32rpx;
        }
      }
      .tip-wrapper-end{
        justify-content: flex-end;
        padding-right: 70rpx;
      }
      
      
      
      .btn-wrapper{
                display: flex;
                justify-content: center;
                margin-top: 40rpx;
        .btn-img{
          width: 360rpx;
          height: 70rpx;
        }
      }
      
    }
    
    .fixed-tip-wrapper-2{
      // bottom: constant(safe-area-inset-bottom);
      // bottom: env(safe-area-inset-bottom);
      bottom: calc(2vh + constant(safe-area-inset-bottom));
      bottom: calc(2vh + env(safe-area-inset-bottom));
      
      .tip-wrapper{
            position: fixed;
            left: -250rpx;
            top: 60rpx;
      }
    }
    
    
    .fixed-tip-wrapper-pos{
          position: fixed;
          top: 34vh;
          /* left: 0; */
          width: 750rpx;
          display: flex;
          justify-content: flex-end;
      
      .tip-wrapper{
            box-sizing: border-box;
            // width: 100vw;
            // padding-left: 64rpx;
        font-size: 29rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 32rpx;
        
        .icon{
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    
    
  }
  
  .use-div-config{
    
  }
  
  .use-div-config-tip{
    position: fixed;
    bottom: calc(8vh + constant(safe-area-inset-bottom) - 64rpx);
    bottom: calc(8vh + env(safe-area-inset-bottom) - 64rpx);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-sizing: border-box;
    width: 100vw;
    // padding-left: 64rpx;
    font-size: 29rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    
    .icon{
      width: 32rpx;
      height: 32rpx;
    }
  }
</style>